<template>
  <el-container class="container">
    <el-header class="header">
      <span>
        <router-link to="/homepage">
          <i class="el-icon-s-home"></i>
        </router-link>
        企业政策兑现审批系统</span
      >

      <div class="login-register-tbn" v-if="!this.$store.state.user">
        <span>
          <router-link to="/login">登录</router-link>
        </span>
        <el-divider direction="vertical"></el-divider>
        <span>
          <router-link to="/register">注册</router-link>
        </span>
      </div>
      <div class="operation-btn" v-else>
        <el-dropdown :hide-on-click="false" class="dropdown-btn">
          <i class="el-icon-s-operation"></i>
          <el-dropdown-menu slot="dropdown" class="dropdown-menu">
            <router-link to="/epbsinfo" style="text-decoration: none">
              <el-dropdown-item icon="el-icon-user">个人信息</el-dropdown-item>
            </router-link>
            <el-dropdown-item
              icon="el-icon-switch-button"
              @click.native="logout"
              >退出登录</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header>
    <el-container class="menu-container">
      <router-view />
    </el-container>
  </el-container>
</template>
<script>
export default {
  name: "homepage",
  data() {
    return {
      activeIndex: "1",
    };
  },
  mounted() {},
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    logout() {
      this.$store.commit("setUser", null);
      this.$router.push("/homepage");
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  height: 100vh;

  a {
    text-decoration: none;
    color: #fff;
  }

  .header {
    width: 100%;
    display: flex;
    align-items: center;
    background-color: #409eff;
    span {
      color: #fff;
      i {
        font-size: 24px;
        margin: 10px;
        cursor: pointer;
      }
    }

    .login-register-tbn {
      height: 100%;
      width: 200px;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: auto;

      a {
        text-decoration: none;
        color: #fff;
      }
    }

    .operation-btn {
      height: 100%;
      width: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: auto;

      .dropdown-btn {
        font-size: 20px;
        color: #fff;
        cursor: pointer;
      }
    }
  }

  .menu-container {
    width: 100%;
    max-height: 100%;
  }
}
</style>
